<apes-header>
  <apes-button-list class="buttonList" [ctx]="ctx" [buttonBarMetadata]="buttonBar"
                    (click)="onEvent($event)"></apes-button-list>
</apes-header>

<apes-content>
  <apes-card [apesBordered]="false">
    <!-- 查询条件 -->
    <div class="boxShowFlex">
      <!-- 制单日期 -->
      <div apes-col apesSpan="8">
        <div>
          <span>制单日期</span>
          <div class="boxDiv">
            <apes-range-picker [(ngModel)]='mdjcTime' [apesFormat]="'yyyy-MM-dd'"></apes-range-picker>
          </div>
        </div>
        <p [ngStyle]="{ display: hind }"><i class="anticon anticon-exclamation-circle-o"></i> 必填！最大时间为一个月 </p>
      </div>

      <!-- 整单金额 -->
      <div apes-col apesSpan="8">
        <div>
          <span>整单金额</span>
          <apes-input-number [(ngModel)]="fullMoneyMin" [apesStep]="1" [apesPlaceHolder]="'请填最小金额'"
                             style="width: 110px"></apes-input-number>
          <i>&nbsp; ~ &nbsp;</i>
          <apes-input-number [(ngModel)]="fullMoneyMax" [apesStep]="1" [apesPlaceHolder]="'请填最大金额'"
                             style="width: 110px"></apes-input-number>
        </div>
        <p [ngStyle]="{ display: fullMoney }"><i class="anticon anticon-exclamation-circle-o"></i> 最大金额不能小于最小金额 </p>
      </div>

      <!-- 状态 -->
      <div apes-col apesSpan="8" style="text-align: center">
        <apes-radio-group [(ngModel)]="checkAll">
          <label apes-radio apesValue="0">未确认</label>
          <label apes-radio apesValue="1">未结算</label>
          <label apes-radio apesValue="2">已结算</label>
          <label apes-radio apesValue="3">已终止</label>
        </apes-radio-group>
      </div>
    </div>

    <!-- 查询条件（外加） -->
    <div class="boxShow" apes-row apesGutter="24" apesSpan="16" [ngStyle]="{ display: show }">
      <!-- 确认耗时 -->
      <div apes-col apesSpan="8">
        <div>
          <span>确认耗时</span>
          <apes-input-number [(ngModel)]="timeValueMin" [apesStep]="0.5" [apesPlaceHolder]="'请填最小时长'"
                             style="width: 110px"></apes-input-number>
          <i>&nbsp; ~ &nbsp;</i>
          <apes-input-number [(ngModel)]="timeValueMax" [apesStep]="0.5" [apesPlaceHolder]="'请填最大时长'"
                             style="width: 110px"></apes-input-number>
        </div>
        <p [ngStyle]="{ display: outTime }"><i class="anticon anticon-exclamation-circle-o"></i> 最大时长不能小于最小时长 </p>
      </div>

      <!-- 商品分类 -->
      <!--<div apes-col apesSpan="8">-->
        <!--<span>商品分类</span>-->
        <!--<ng-select style="width: 240px; display: inline-block;"-->
          <!--clearAllText-->
          <!--[items]="productData"-->
          <!--bindLabel="PLMC"-->
          <!--bindValue="PLID"-->
          <!--[placeholder]="'选填'" [notFoundText]="'无法找到'" typeToSearchText [(ngModel)]="plID">-->
        <!--</ng-select>-->
      <!--</div>-->


      <!-- 下拉树 -->
      <div apes-col [apesMd]="8">
        <span>商品分类</span>
        <apes-tree-select
          style="width: 240px"
          [apesDefaultExpandedKeys]="expandKeys"
          [(ngModel)]="valueTree"
          [apesNodes]="productData"
          apesShowSearch
          [apesCheckable]="true"
          (ngModelChange)="onChange($event)"
          apesPlaceHolder="选填"></apes-tree-select>
      </div>

      <!-- 门店 -->
      <div apes-col apesSpan="8">
        <span>门店</span>
        <ng-select style="width: 240px; display: inline-block;"
                   clearAllText
                   [items]="arrNXMD"
                   bindLabel="MDMC"
                   bindValue="MDID"
                   [placeholder]="'选填'" [notFoundText]="'无法找到'" typeToSearchText [(ngModel)]="ngNXMD">
        </ng-select>
      </div>

      <!-- 车牌号 -->
      <div apes-col apesSpan="8">
        <span>车牌号</span>
        <input type="text" apes-input placeholder="请输入车牌号码" [(ngModel)]="carNum" style="width: 240px;">
      </div>

      <!-- 单品金额 -->
      <div apes-col apesSpan="8">
        <div>
          <span>单品金额</span>
          <apes-input-number [(ngModel)]="moneyMin" [apesStep]="1" [apesPlaceHolder]="'请填最小金额'"
                             style="width: 110px"></apes-input-number>
          <i>&nbsp; ~ &nbsp;</i>
          <apes-input-number [(ngModel)]="moneyMax" [apesStep]="1" [apesPlaceHolder]="'请填最大金额'"
                             style="width: 110px"></apes-input-number>
        </div>
        <p [ngStyle]="{ display: money }"><i class="anticon anticon-exclamation-circle-o"></i> 最大金额不能小于最小金额 </p>
      </div>

      <!-- 服务单号 -->
      <div apes-col apesSpan="8">
        <span>服务单号</span>
        <input type="text" apes-input placeholder="请输入服务单号" [(ngModel)]="fwNum" style="width: 240px;">
      </div>

      <!-- 服务方案号 -->
      <div apes-col apesSpan="8">
        <span>服务方案号</span>
        <input type="text" apes-input placeholder="请输入服务方案号" [(ngModel)]="fwfaNum" style="width: 240px;">
      </div>

      <!-- 会员号 -->
      <div apes-col apesSpan="8">
        <span>会员</span>
        <input type="text" apes-input placeholder="请输入会员号" [(ngModel)]="vipNum" style="width: 240px;">
      </div>

      <div apes-col apesSpan="8">
        <span>公司</span>
        <ng-select style="width: 240px; display: inline-block;"
                   typeToSearchText
                   [items]="companyData"
                   multiple="true"
                   bindLabel="name"
                   bindValue="id"
                   placeholder="选填，可多选"
                   [(ngModel)]="companyList"
                   [notFoundText]="'无法找到'"
                   (change)="getNxmdData()">
        </ng-select>
      </div>

    </div>

    <!-- 表格 -->
    <div>
      <ag-grid-angular #grid
                       style="width: 100%;" [ngStyle]="{ height: height }" class="ag-theme-balham"
                       enableColResize="true"
                       enableSorting="true"
                       enableFilter="true"

                       suppressLoadingOverlay="true"

                       [rowData]="rowData"
                       [gridOptions]="gridOptions"
                       [columnDefs]="columnDefs"
                       [pinnedBottomRowData]="pinnedBottomRowData"
                       [getContextMenuItems]="getContextMenuItems">
      </ag-grid-angular>
    </div>
  </apes-card>
</apes-content>
